<template>
  <div class="login">
	<!-- 导航栏 -->
    <van-nav-bar :title="flag?'登录':'注册'" left-text="" left-arrow  @click-left="onClickLeft">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
	<br><br><br>
	<!-- 表单 -->
	<van-form @submit="onSubmit">
	  <van-field
	    v-model="username"
	    name="用户名"
	    label="用户名"
	    placeholder="用户名"
	    :rules="[{ required: true, message: '请填写用户名' }]"
	  />
	  <van-field
	    v-model="password"
	    type="password"
	    name="密码"
	    label="密码"
	    placeholder="密码"
	    :rules="[{ required: true, message: '请填写密码' }]"
	  />
	  
	  <!-- 验证码 -->
	  <template>
	        <Verify @success="alert('success')" 
			@error="alert('error')" 
			:type="2"
			:showButton="false"
			ref="verify"
			></Verify>
	  </template>
	  
	  <p class="register" @click="toggleLogin">{{flag?"立即注册":"已有登录账号"}}</p>
	  
	<div style="margin: 16px;">
	    <van-button round block type="info" native-type="submit">{{flag?"登录":"注册"}}</van-button>
	  </div>
	</van-form>
	
  </div>
</template>

<script>
import Verify from 'vue2-verify'
import { Toast } from 'vant';
export default {
  name: 'Login',
  data() {
      return {
        username: '',
        password: '',
		flag:true,
		verflag:false
      };
  },
  methods:{
	alert(text) {//验证码的事件
	    //console.log(text+"111")
		this.verflag=text=="success"?true:false;
	},
	onClickLeft(){//返回按钮事件
		if(this.$route.query.needback){//重新登录后，返回到当前页面
			this.$router.back();
		}else{//初次登录，进入首页
			this.$router.push("/home");
		}
	},
	onSubmit(values) {//提交  values 包含用户名和密码
	    //console.log('submit', values);
		this.$refs.verify.checkCode();//调用checkCode()就会执行验证码插件的 success和error 事件
	    if(this.verflag){//验证码成功 登录或者注册
			if(this.flag){//登录
				this.$http.myLogin(values["用户名"],values["密码"]).then(data=>{
					console.log(data);
					let {resultCode}=data;
					if(resultCode==200){//登录成功 1.跳转到首页 2.存储token--data.data
						if(this.$route.query.needback){//重新登录后，返回到当前页面
							this.$router.back();
						}else{//初次登录，进入首页
							this.$router.push("/home");
						}
						
						localStorage.setItem("xfdata",data.data);
					}
				}).catch(err=>{
					console.log(err);
				})
			}else{//注册
				this.$http.myRegister(this.username,this.password).then(data=>{
					//console.log(data);
					if(data.resultCode==200){
						Toast.success('');//弹框组件
						this.flag=true;//切换到登录
						this.username=this.password="";//用户名和密码为空
						this.$refs.verify.refresh();//刷新验证码
					}
				}).catch(err=>{
					console.log(err);
				})
			}
		}else{//验证码失败 刷新验证码
			this.$refs.verify.refresh();
		}
	},
	toggleLogin(){//切换登录和注册
		this.flag=!this.flag;
		this.username="";
		this.password="";
		this.$refs.verify.refresh();
		//console.log(this.$refs.verify);
	}
  },
  components: {
     Verify
  }
}
</script>

<style lang="less" scoped>
	/deep/.cerify-code-panel{
		display: flex;
		padding:8px;
	}
	.register{
		font-size:16px;
		text-indent:10px;
		color:#1989FA;
		padding:8px 0px;
	}
</style>